<template>
    <div class="performance">
        <el-table v-loading="loading" :data="tableData" border stripe style="width: 60%">
            <el-table-column type="index" label="序号" width="150"></el-table-column>
            <el-table-column prop="userQuiz.userName" label="学生姓名" width="150"></el-table-column>
            <el-table-column prop="userQuiz.quizTitle" label="实验名称" width="150"></el-table-column>
            <el-table-column prop="userQuiz.totalScore" label="测试数据分数" width="150"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" icon="el-icon-s-operation" @click="handleClick(scope.row)">查看数据</el-button>
                    <el-button type="primary" size="small" icon="el-icon-s-operation" @click="handleClick1(scope.row)">修改分数</el-button>
                    <el-button type="warning" size="small" v-show="scope.row.userQuiz.isCheck">已申请人工核实</el-button>
                </template>
            </el-table-column>

            <el-dialog :title="isShowData ? '数据' : '分数'" :visible.sync="dialogFormVisible" :append-to-body="true">
            <el-form :model="form">
                <!-- <el-form-item label="分数" :label-width="formLabelWidth">
                <el-input v-model="form.score" autocomplete="off"></el-input>
                </el-form-item> -->
                <div v-if="isShowData">
                <div v-for="(item, index) in form.userThresholdCustomList" :key="index" style="display:flex;flex-direction: column;">
                    <!-- <el-row v-for="(item, index) in item.userThresholdList" :key="index"> -->
                        <div>
                            <span>{{ getTableThreshouldType(item.type) }}</span>
                            <span>{{ getTableTitle(item.type) }}</span>
                        </div>
                        <div style="display: flex;">
                            <el-col v-for="(childItem, index) in item.userThresholdList" :key="index">
                                <!-- <el-row v-if="childItem.threshold.u1">
                                    <span>{{childItem.threshold.u1}}</span>
                                </el-row>
                                <el-row v-if="childItem.threshold.r">
                                    <span>{{childItem.threshold.r}}</span>
                                </el-row>
                                <el-row v-if="childItem.threshold.i">
                                    <span>{{childItem.threshold.i}}</span>
                                </el-row> -->
                                <el-row v-if="childItem.u1">
                                    <span>{{childItem.u1}}</span>
                                </el-row>
                                <el-row v-if="childItem.i2">
                                    <span>{{childItem.i2}}</span>
                                </el-row>
                                <el-row v-if="childItem.g">
                                    <span>{{childItem.g}}</span>
                                </el-row>
                                <el-row v-if="childItem.r">
                                    <span>{{childItem.r}}</span>
                                </el-row>
                                <el-row v-if="childItem.i1">
                                    <span>{{childItem.i1}}</span>
                                </el-row>
                                <el-row v-if="childItem.i1">
                                    <span>{{childItem.u2}}</span>
                                </el-row>
                                <el-row v-if="childItem.r1">
                                    <span>{{childItem.r1}}</span>
                                </el-row>
                                <el-row v-if="childItem.u">
                                    <span>{{childItem.u}}</span>
                                </el-row>
                                <el-row v-if="childItem.b">
                                    <span>{{childItem.b}}</span>
                                </el-row>
                            </el-col>
                        </div>
                        
                    <!-- </el-row> -->
                </div>
                </div>
                
            <div v-else>
                    <el-form-item label="实验数据分数" :label-width="formLabelWidth">
                    <el-input v-if="form.userQuiz" v-model="form.userQuiz.totalScore" autocomplete="off"></el-input>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" v-if="isShowData" @click="updateScore()">确 定</el-button>
                <el-button type="primary" v-else @click="updateScore1()">确 定</el-button>
            </div>
            </el-dialog>
        </el-table>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 50, 100]"
        :page-size="param.pageSize"
        layout="total, prev, pager, next"
        :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
    data() {
        return {
            loading: false,
            tableData: [],
            total: 0,
            param: {
                pageSize: 5,
                pageNo: 1
            },
            dialogFormVisible: false,
            form: {},
            formLabelWidth: '120px',
            isShowData: false
    
        }
    },
    created() {
        
    },
    mounted() {
        this.getByPage()
    },
    methods: {
        getTableThreshouldType(type) {
            if(type === '001') {
                return '1.	VCCS'
            }
            if(type === '003') {
                return '2.	CCVS'
            }
            if(type === '005') {
                return '3.	VCVS'
            }
            if(type === '007') {
                return '4.	CCCS'
            }
        },
        getTableTitle(type) {
            if(type === '001') {
                return '表1-1-1 RL=0时的测量'
            }
            if(type === '002') {
                return '表1-1-2 保持U1=3.00V的测量'
            }
            if(type === '003') {
                return '表1-2-1 RL=∞时的测量'
            }
            if(type === '004') {
                return '表1-2-2 保持I1=2.00mA的测量'
            }
            if(type === '005') {
                return '表1-3-1 RL=∞时的测量'
            }
            if(type === '006') {
                return '表1-3-2 保持U1=3.00V的测量'
            }
            if(type === '007') {
                return '表1-4-1 RL=0时的测量'
            }
            if(type === '008') {
                return '表1-4-2 保持I1=2.00mA的测量'
            }

        },
        getByPage() {
            let url = '/threshold/getAllData'
            this.loading = true
            this.$http.post(url,this.param).then(data => {
                this.loading = false
                debugger
                if (data.data.success === true) {
                    console.log("数据为" + JSON.stringify(data.data.data.records));
                    
                    // localStorage.username = data.data.userName;
                    this.tableData = data.data.data.records
                    this.total = data.data.data.total
                } else {
                    this.$message.error(data.message);
                }
            }).catch(() => {
                this.loading = false
            })
        },
        // TODO 跳转详情
        handleClick(row) {
            this.form = row
            this.dialogFormVisible = true
            this.isShowData = true
            this.$forceUpdate()
        },
        handleClick1(row) {
            this.form = row
            debugger
            this.dialogFormVisible = true
            this.isShowData = false
            this.$forceUpdate()
        },
        updateScore() {
                this.dialogFormVisible = false  
        },
        updateScore1() {
            console.log("this.form" + JSON.stringify(this.form));
            if(this.form.userQuiz.totalScore > 50) {
                this.$message.error('总分不超过50份');
                return
            }
            this.$http.post("/userQuiz/updateScore", this.form.userQuiz, {}).then(({body}) => {
                if (body.success === true) {
                    // this.getByPage();
                    this.$message.success(body.message);
                    // window.location.reload();
                } else {
                    this.$message.error(body.message);
                }
            }).catch(() => {
                this.$message.error('修改');
            })
            this.dialogFormVisible = false
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.getByPage()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.getByPage()
        }
    }
}
</script>

<style scope>
.performance {
    padding: 10px 10px;
    background: #fff;
}
.performance .el-row {
    height:30px;
}
</style>
